<template>
  <div class="container">
    <global-header :user="userData" />
    <loader v-if="isLoading"></loader>
    <Modal :visible="visible" @modal-on-confirm="handerOk"  @modal-on-close="handerClose">
      <div>自定义modal内容</div>
    </Modal>
      <!-- <Uploader action="xxxx" :beforeUpload="handerBeforeUploader" @file-uploader="onFileUploaded">
        <template #loading>
          <div class="spinner-border" role="status">
            <span class="sr-only">loading...</span>
          </div>
        </template>
        <template #uploaded="{uploaderData}">
           <button class="btn btn-primary">点击上传</button>
          <img :src="uploaderData.data.url" alt="" width="500" />
        </template>
      </Uploader> -->
    <!-- <Message v-if="error.status" type="error" :message="error.message" @close-message="closeMessage"/> -->
    <router-view></router-view>
     <footer class="text-center py-4 text-secondary bg-light mt-6">
      <small>
        <ul class="list-inline mb-0">
          <li class="list-inline-item">© 2020 者也专栏</li>
          <li class="list-inline-item">课程</li>
          <li class="list-inline-item">文档</li>
          <li class="list-inline-item">联系</li>
          <li class="list-inline-item">更多</li>
        </ul>
      </small>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import { GlobalDataProps, ResponseType, ImageProps } from '@/store/index'
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from 'axios';
import GlobalHeader from '@/components/GlobalHeader.vue'
import Loader from '@/components/Loader.vue'
import createMessage from '@/components/CreateMessage'
// import Uploader from '@/components/Uploader.vue'

import Modal from '@/components/Modal.vue'

export default defineComponent({
  name: 'app',
  components: {
    GlobalHeader,
    Loader,
    // Message
    // Uploader,
    Modal
  },

  setup () {
    const store = useStore<GlobalDataProps>();
    const userData = computed(() => store.state.user);
    const isLoading = computed( () => store.state.isLoading)
    
    const error = computed(() =>  store.state.error)
    const closeMessage = (status: boolean) => {
       store.commit('setError', {status, message: ''})
    }

    watch(() => error.value.status, (statusVal) => {
      console.log("statusError==", statusVal)
      const {status, message} = error.value
      if(status && message) {
        createMessage(message, 'error')
      }
    })

    // 从localStorage中获取token，自动登录
    onMounted(() => {
      console.log("app mounted....");
        // update @2021-03-03: 迁移到router.beforeEach统一处理登录
        // if(token.value && !userData.value.isLogin) {
        //   axios.defaults.headers.common.Authorization = `Bear ${token.value}`
        //   store.dispatch('fetchCurrentUser')
        // }else {
        //   localStorage.clear();
        // }
    })


    // const handerBeforeUploader = (file: File) => {
    //   const isJPG = file.type === 'image/jpeg';
    //   console.log("file==", file)
    //   if(!isJPG) {
    //     createMessage('上传的图片只能是jpg格式', 'error')
    //   }
    //   return isJPG;
    // }
    
    // // 上传成功
    // const onFileUploaded = (rawData: ResponseType<ImageProps>) => {
    //   console.log("upload success ", rawData.data);
    //   createMessage(`上传图片ID ${rawData.data._id}`, 'success')
    // }
    

    // 测试Modal
    const visible = ref(false);
    const handerOk = () => {
      visible.value = false;
    }
     const handerClose = () => {
      visible.value = false;
    }
    return {
      userData,
      isLoading,
      error,

      closeMessage,
      // handerBeforeUploader,
      // onFileUploaded
      visible,
      handerOk,
      handerClose
    }
  }
})
</script>
